<template>
    <div class="register">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="login-title">注册</span>
            </div>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名:">
                    <el-input type="text" v-model="form.Username"></el-input>
                </el-form-item>
                <el-form-item label="密码:">
                    <el-input type="text" v-model="form.Password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码:">
                    <el-input type="text" v-model="form.RepeatPwd"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:">
                    <el-input type="text" v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="偏好:">
                    <el-checkbox>体育类</el-checkbox>
                    <el-checkbox>校园类</el-checkbox>
                    <el-checkbox>情感类</el-checkbox>
                    <el-checkbox>游戏类</el-checkbox>
                </el-form-item>
                <div style="display: flex; justify-content: space-between;margin-left: -65px;">
                    <el-form-item style="flex-grow: 1; margin-right: 10px;">
                        <el-button style="width:100%;" type="primary" @click="newRegister">注册</el-button>
                    </el-form-item>
                    <el-form-item style="flex-grow: 1;">
                        <el-button style="width:100%;" type="primary" @click="goToLogin">返回</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'RegisterForm',
    data() {
        return {
            form: {
                Username: '',
                Password: '',
                RepeatPwd: '',
                phone: ''
            }
        }
    },
    methods: {
        goToLogin() {
            this.$router.push('/login');
        }, newRegister() {
            if (this.form.Password === this.form.RepeatPwd) {
                this.$axios.post('https://localhost:44300/api/User/AddNewUser', {
                    Username: this.form.Username,
                    Password: this.form.Password,
                }).then(res => {
                    console.log(res.data.success);
                    if (res.data.success === true) {
                        this.$message({
                            message: '注册成功',
                            type: 'success'
                        });
                        this.$router.push('/login');
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                }).catch(error => {
                    console.log(error);
                });
            } else {
                this.$message({
                    message: '两次密码不一样',
                    type: 'error'
                });
            }
        }
    }
}
</script>

<style>
.register {
    background: linear-gradient(to bottom, #66a9c9, #ADD8E6);
    height: 97vh;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.box-card {
    width: 575px;
}
</style>